var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');
// var IScroll = require('iscroll');
var IScroll = require('iscroll/build/iscroll-probe');

module.exports = React.createClass({

	componentDidMount: function(){
		this.attachScroller();
	},

	componentDidUpdate: function(){
		this.refreshScroller();
	},

	componentWillUnmount: function(){
		if( !this.scroller ){
			return;
		}
		this.scroller.off('scrollEnd');
		this.scroller.destroy();
		window.removeEventListener('orientationchange', this.refreshScroller, false);
		window.removeEventListener('hidekeyboard', this.refreshScroller, false);
	},
  	handleRefresh: function(){
	    return new Promise((resolve, reject) => {
	    	this.props.onRefresh(resolve, reject);
	    });
	},
	pullUpAction: function() {
			// Once actual loading is complete, reset pull to refresh
		this.handleRefresh().then(function() {
			this.pullDownEl.children[1].innerHTML = "刷新成功";
			setTimeout(function() {
				this.refreshScroller();
			}.bind(this), 100);
		}.bind(this));
	},
	attachScroller: function(){
		if( !this.isMounted() ){
			return;
		}
		this.pullDownEl = ReactDOM.findDOMNode(this.refs.pullDown);
		var pullDownEl = this.pullDownEl;
		this.pullDownLabel = ReactDOM.findDOMNode(this.refs.pullDownLabel);
		var pullDownLabel = this.pullDownLabel;
		var downFlag = true;
		this.wrapper = $(ReactDOM.findDOMNode(this.refs.wrapper));
		this.scroller = new IScroll(ReactDOM.findDOMNode(this.refs.wrapper), {
			// click: true,
			tap: true,
			mouseWheel: true,
			scrollbars: false,
			fadeScrollbars: false,
	    //bounceEasing: 'bounce', 
	    //bounceTime: 300,
	    probeType: 3,
	    //useTransform:true
	    
	  });
		
		window.addEventListener('orientationchange', this.refreshScroller, false);
		window.addEventListener('hidekeyboard', this.refreshScroller, false);
		var me = this;
		this.scroller.on('scrollEnd', function () {
			if(Math.abs(me.scroller.maxScrollY) - Math.abs(me.scroller.y) < 200){
				!!me.props.onScrollToBottom && me.props.onScrollToBottom();
			}
			if (me.props.pullDownIcon) {
				if (!downFlag) {
					pullDownEl.children[1].innerHTML = "正在刷新";
					me.pullUpAction();
					downFlag = true;
				}
			}
		});
		this.scroller.on('scroll', function () {
			if(this.props.pullDownHeight){
				if(this.scroller.y > this.props.pullDownHeight){
					if(this.props.pullDownCallback){
						this.props.pullDownCallback();
					}
				}
			}
			if (this.props.pullDownIcon) {
				if (this.scroller.y > 50 && downFlag) {
					pullDownLabel.innerHTML = "释放刷新";
					downFlag = false;
				}
				if (this.scroller.y <= 50 && !downFlag) {
					pullDownEl.style.display = 'block';
					pullDownEl.children[1].innerHTML = "正在刷新";
					pullDownLabel.style.display = 'none';
				}
			}
		}.bind(this));
		this.refreshScroller();
	},

	refreshScroller: function(){
		var offset = 0;
		var prevEl = this.wrapper.prev();
		var pullDownEl = this.pullDownEl;
		var pullDownLabel = this.pullDownLabel;

		if( prevEl.length ){
			offset = prevEl.offset().top + prevEl.outerHeight();	
		}

		offset = 0;
		if (this.props.pullDownIcon) {
			pullDownEl.style.display = 'none';
			pullDownLabel.innerHTML = '下拉刷新';
		}
		if (!this.props.noPullDownBar) {
			pullDownLabel.style.display = 'block';
		}
		
		var height = this.props.height;
		if(height == null){
			height = $('body').height();
		}
		this.wrapper
		.height(height - offset)
		.width($(window).width());
		this.scroller.refresh();
	},
	
	render: function(){
		var pullDownIcon = null;
		var pullDwonLabel = null;
		var pullDwonLabelName = '';

		if(this.props.pullDownIcon){
			pullDownIcon = <i className="icon-spin icon-refresh"></i>;
			pullDwonLabelName = '下拉刷新';
		}
		var pullDownBar = null;
		if(this.props.noPullDownBar == true){
		}
		else{
			pullDwonLabel = (<div id="pull-down-label" ref="pullDownLabel" style={{height: "42px", textAlign: 'center', fontSize: "10px", lineHeight: "40px"}}>
				<span className="pullUpLabel">{pullDwonLabelName}</span>	
			</div>)
			pullDownBar = (
				<div id="pull-down" ref="pullDown" style={{height: "52px", textAlign: 'center', fontSize: "10px", lineHeight: "40px", display: "none"}}>
							{pullDownIcon}
							{pullDwonLabel}
				</div>
			);
		}

		return(
			<div>
				{pullDownBar}	
				<div ref="wrapper" className="scroller-wrapper" style={{marginTop: (this.props.marginTop != null? this.props.marginTop: 0)}}>
					<div ref="scroller" className="scroller">
						{pullDwonLabel}
						{this.props.children}
					</div>
				</div>
			</div>
			);
	}
});